<!--
 * @Author: 哈兰德
 * @Description: 魔方组件管理端配置
-->
<template>
  <div class="magicCube_cssEditor">
    <hot-area-config
      ref="hotArea"
      :image-object="selectBlock"
      @callback="callbackAreaConfig"
    />
    <editor-panel title="魔方组件属性">
      <div>
        <div style="padding: 10px">
          <div>选择模版：{{ selectedTemplate.name }}</div>
          <div class="template-list">
            <div
              v-for="item in templateList"
              :key="item.id"
              class="item"
              :class="{ 'item-on': selectedTemplate.id === item.id }"
              @click="selectTemplate(item)"
            >
              <img
                :title="item.name"
                style="width: 70%"
                :src="selectedTemplate.id === item.id ? item.icon_on : item.icon"
              />
            </div>
          </div>
        </div>

        <div class="el-card__header">
          魔方布局
        </div>
        <div
          v-if="selectedTemplate.id <= 4"
          class="pre-outer"
          :style="{ width: selectedTemplate.id === 4 ? '180px' : '' }"
        >
          <div
            v-for="(item, index) in imageList"
            :key="item._id"
            :class="{
              'pre-img-block-1': selectedTemplate.id === 1,
              'pre-img-block-2': selectedTemplate.id === 2,
              'pre-img-block-3': selectedTemplate.id === 3,
              'pre-img-block-4': selectedTemplate.id === 4,
              'pre-select': selectBlock._id === item._id,
            }"
            @click="selectLayoutBlock(item, index)"
          >
            {{ item.text }}
          </div>
        </div>
        <div v-if="selectedTemplate.id === 5" class="pre-outer">
          <div
            class="pre-img-block-5-1"
            :class="{ 'pre-select': selectIndex === 0 }"
            @click="selectLayoutBlock(null, 0)"
          >
            {{ imageList[0].text }}
          </div>
          <div>
            <div
              class="pre-img-block-5-2"
              :class="{ 'pre-select': selectIndex === 1 }"
              @click="selectLayoutBlock(null, 1)"
            >
              {{ imageList[1].text }}
            </div>
            <div
              class="pre-img-block-5-2"
              :class="{ 'pre-select': selectIndex === 2 }"
              @click="selectLayoutBlock(null, 2)"
            >
              {{ imageList[2].text }}
            </div>
          </div>
        </div>
        <div v-if="selectedTemplate.id === 6" class="pre-outer-2">
          <div
            class="pre-img-block-6-1"
            :class="{ 'pre-select': selectIndex === 0 }"
            @click="selectLayoutBlock(null, 0)"
          >
            {{ imageList[0].text }}
          </div>
          <div class="pre-img-block-6">
            <div
              class="pre-img-block-6-2"
              :class="{ 'pre-select': selectIndex === 1 }"
              @click="selectLayoutBlock(null, 1)"
            >
              {{ imageList[1].text }}
            </div>
            <div
              class="pre-img-block-6-2"
              :class="{ 'pre-select': selectIndex === 2 }"
              @click="selectLayoutBlock(null, 2)"
            >
              {{ imageList[2].text }}
            </div>
          </div>
        </div>
        <div v-if="selectedTemplate.id === 7" class="pre-outer">
          <div
            class="pre-img-block-7-1"
            :class="{ 'pre-select': selectIndex === 0 }"
            @click="selectLayoutBlock(null, 0)"
          >
            {{ imageList[0].text }}
          </div>
          <div>
            <div
              class="pre-img-block-7-2"
              :class="{ 'pre-select': selectIndex === 1 }"
              @click="selectLayoutBlock(null, 1)"
            >
              {{ imageList[1].text }}
            </div>
            <div class="pre-img-block-7">
              <div
                class="pre-img-block-7-3"
                :class="{ 'pre-select': selectIndex === 2 }"
                @click="selectLayoutBlock(null, 2)"
              >
                {{ imageList[2].text }}
              </div>
              <div
                class="pre-img-block-7-3"
                :class="{ 'pre-select': selectIndex === 3 }"
                @click="selectLayoutBlock(null, 3)"
              >
                {{ imageList[3].text }}
              </div>
            </div>
          </div>
        </div>
        <div class="image-list">
          <image-upload
            :before-upload="beforeUpload"
            :is-need-delete="false"
            @input="handleUploaduccess($event)"
          >
            <div>
              <div class="uploadBtn">
                <img
                  v-if="selectBlock.image"
                  style="width: 100%; height: 100%"
                  :src="selectBlock.image"
                />
                <i
                  v-if="!selectBlock.image"
                  class="el-icon-plus"
                  style="font-size: 42px"
                ></i>
              </div>
            </div>
          </image-upload>
          <div class="input-block">
            <el-input
              v-model="imageLink"
              style="width: 180px; margin-top: 5px"
              placeholder="跳转URL,非必填"
              @change="changeImageLink()"
            />
            <div style="padding-top: 5px">
              <a
                style="color: #549be7"
                href="#"
                @click="configItem()"
              >热区配置</a>
            </div>
          </div>
        </div>
        <style-atr
          :selected-template="selectedTemplate"
          :activity-code="activityCode"
          :module-code="moduleCode"
          @addStep="addStep"
        />
      </div>
      <rule-config
        ref="ruleconfig"
        rule-type="content"
        :element-code="'elecode_' + selectBlock._id"
        :activity-code="activityCode"
        :component-id="selectedComponent._id"
        :rules="rules"
        @callback="saveRuleConfig"
      />
    </editor-panel>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import selfUtil from './util'
import StyleAtr from './components/StyleAtr/index'
import ImageUpload from '@/components/properties/common/ImageUpload'
import HotAreaConfig from '@/components/properties/common/HotAreaConfig'
import RuleConfig from '@/components/properties/common/RuleConfig'
import EditorPanel from '@/components/properties/common/EditorPanel'
export default {
  components: {
    HotAreaConfig,
    RuleConfig,
    StyleAtr,
    EditorPanel,
    ImageUpload
  },
  props: {
    activityCode: {
      type: String,
      default: ''
    },
    moduleCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      rules: {},
      imageLink: '',
      tag: true,
      selectBlock: {},
      selectIndex: 0,
      layout: 1,
      imageList: [],
      uploading: false,
      templateList: [
        {
          id: 1,
          name: '一行两个',
          text: '375 x 375',
          num: 2,
          icon: '/images/mofang/mofang1.png',
          icon_on: '/images/mofang/mofang1_on.png'
        },
        {
          id: 2,
          name: '一行三个',
          text: '250 x 250',
          num: 3,
          icon: '/images/mofang/mofang2.png',
          icon_on: '/images/mofang/mofang2_on.png'
        }
        ,
        {
          id: 3,
          num: 4,
          name: '一行四个',
          text: '188',
          icon: '/images/mofang/mofang3.png',
          icon_on: '/images/mofang/mofang3_on.png'
        },
        {
          id: 4,
          name: '两行四个',
          num: 4,
          text: '375 x 375',
          icon: '/images/mofang/mofang4.png',
          icon_on: '/images/mofang/mofang4_on.png'
        },
        {
          id: 5,
          name: '左右三个',
          num: 3,
          icon: '/images/mofang/mofang5.png',
          icon_on: '/images/mofang/mofang5_on.png'
        },
      ],
      selectedTemplate: {}
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent'])
  },
  watch: {
    'selectedComponent._id' () {
      this.initData()
      this.selectIndex = 0
      this.fillDataToForm()
      this.selectBlock = this.imageList[0]

    },
    stepsl () {
      this.fillDataToForm()
    }
  },
  mounted () {
    this.initData()
    this.fillDataToForm()
  },
  methods: {
    ...mapMutations('main', [
      'editComponent',
      'addComponentListItem',
      'removeComponentListField',
      'editComponentListItem',
      'updateChildListModelField'
    ]),
    ...mapMutations('step', ['stepsAdd1', 'stepLock']),
    editComponentFn (field, value) {
      this.editComponent({
        _id: this.selectedComponent._id,
        field: field,
        value: value
      })
    },
    editComponentListItemFn (value, index) {
      this.editComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: value,
        index: index
      })
    },
    openRuleConfig () {
      this.$refs.ruleconfig.openDialog()
    },
    saveRuleConfig (data) {
      // 保存规则后的回调，修改组件的上下架时间和规则状态
      let tag = false
      if (data.onlineTime || data.ruleList.length > 0) {
        tag = true
      }
      this.selectBlock.ruleTag = tag
      this.editComponentListItemFn(this.selectBlock, this.selectIndex)
      let hasTrue = this.selectedComponent.imageList.find((a) => a.ruleTag)
      this.editComponentFn('childRuleTag', hasTrue ? true : false)
      this.fillDataToForm()
    },
    selectTemplate (item) {
      this.editComponentFn('layout', item.id)
      this.editComponentFn('imageGutter', 0)
      let list = selfUtil.transferList(item)
      this.editComponentFn('imageList', list)
      this.selectBlock = list[0]
      this.selectIndex = 0
      this.fillDataToForm()
      this.selectedTemplate = item
      this.layout = item.id
    },
    configItem () {
      if (!this.selectBlock.image) {
        this.$message.error('请先上传图片!')
        return
      }
      this.$refs.hotArea.openDialog()
    },
    callbackAreaConfig (areaList) {
      this.updateChildListModelField({
        _id: this.selectedComponent._id,
        field: 'imageList',
        childId: this.selectBlock._id,
        childField: 'hotAreaList',
        value: areaList
      })
      this.fillDataToForm()
      this.addStep()
    },
    handleUploadError () {
      this.uploading = false
      this.$message({
        type: 'error',
        message: '上传失败!'
      })
    },
    handleUploaduccess (response) {
      this.uploading = false
      if (response.flag === 'F') {
        this.$message({
          type: 'error',
          message: '上传失败!' + response.msg
        })
      } else {
        this.updateChildListModelField({
          _id: this.selectedComponent._id,
          field: 'imageList',
          childId: this.selectBlock._id,
          childField: 'image',
          value: response
        })
        this.fillDataToForm()
        this.addStep()
      }
    },
    beforeUpload (file) {
      if (!selfUtil.beforeUpload(file)) {
        return false
      } else {
        this.uploading = true
        return true
      }
    },
    fillDataToForm () {
      this.imageList = JSON.parse(JSON.stringify(this.selectedComponent.imageList))
      this.layout = this.selectedComponent.layout
      this.selectedTemplate = this.templateList.find(
        item => item.id === this.selectedComponent.layout
      )
      if (!this.selectedTemplate || !this.selectedTemplate.id) {
        this.selectedTemplate = this.templateList[0]
      }
      this.layout = this.selectedComponent.layout
      if (this.imageList.length > 0) {
        this.imageLink = this.imageList[this.selectIndex].link
        let tempBlock = JSON.parse(JSON.stringify(this.selectBlock))
        if (!tempBlock._id) {
          tempBlock = JSON.parse(JSON.stringify(this.imageList[0]))
        }
        tempBlock.image = this.imageList[this.selectIndex].image
        tempBlock.hotAreaList = JSON.parse(JSON.stringify(this.imageList[this.selectIndex].hotAreaList))
        this.selectBlock = JSON.parse(JSON.stringify(tempBlock))
      }
    },
    addItem () {
      let length = this.imageList.length
      if (length >= 10) {
        this.$message.error('最多10张图片，不能再增加了！')
        return
      }
      let item = {
        image: '',
        _id: tool.guid(),
        hotAreaList: [],
        uploadTag: false
      }
      this.addComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: item
      })
      this.fillDataToForm()
      this.addStep()
    },
    removeItem (item, index) {
      this.removeComponentListField({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: index
      })
      this.fillDataToForm()
      this.addStep()
    },
    clearItem (item, index) {
      item.image = ''
      item.link = ''
      item.hotAreaList = []
      this.editComponentListItemFn(item, index)
      this.fillDataToForm()
      this.addStep()
    },
    changeImageLink () {
      this.selectBlock.link = this.imageLink
      this.editComponentListItemFn(this.selectBlock, this.selectIndex)
      this.fillDataToForm()
      this.addStep()
    },
    addStep () {
      setTimeout(() => {
        if (this.tag) {
          this.tag = false
          this.stepsAdd1(this.pageContent)
          setTimeout(() => {
            this.tag = true
          }, 500)
        }
      }, 200)
    },
    selectLayoutBlock (item, index) {
      this.selectBlock = item ? item : this.imageList[index]
      this.selectIndex = index
      this.fillDataToForm()
    },
    initData () {
      if (this.selectedComponent.imageList.length === 0) {
        let list = selfUtil.getDefaultImages(2, '375 x 375')
        this.editComponentFn('imageList', list)
        this.selectBlock = list[0]
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>